<!DOCTYPE html>
<html>
<head>
	<title>Arrow Ninja (By Khaled Garbaya)</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script src="lib_js/easel.js"></script>
	<script src="lib_js/sound.js"></script>
	<script>
	/*
		Arrow Ninja a basic HTML5 game built using EaselJS
		@author Khaled Garbaya <http://khaledgarbaya.net>
	*/

	var canvas;
	var stage;

	var _mouseIsDown;
	var _mouseX;
	var _mouseY;

	var outerContainer;		// nested invisble container to generate a spirograph effect
	var innerContainer;		// nested invisble container to generate a spirograph effect

	var shape;		// drawing shape
	var color;		// drawing color
	var lastPt;		// last draw position
	var graphics;
	var count = 0;
	var lineSize =8;

	var arrowImage;
	var arrowBitmap;
	var arrowHolder;
	var MAX_ARROW = 10;
	var arrowSpeed = 8;
	var __debugMode = true;
function init() {
	// create a new stage and point it at our canvas:
	canvas = document.getElementById("canvas");
	stage = new Stage(canvas);
	//Sound
	// determine browser
	var filetype;
	agent = navigator.userAgent.toLowerCase();
	
	// adjust for browser
	if(agent.indexOf("chrome") > -1){
		filetype = ".mp3";
	} else if(agent.indexOf("opera") > -1) {
		filetype = ".ogg";
	} else if(agent.indexOf("firefox") > -1) {
		filetype = ".ogg";
	} else if(agent.indexOf("safari") > -1) {
		filetype = ".mp3";
	} else if(agent.indexOf("msie") > -1) {
		filetype = ".mp3";
	}
	
	// set references
	SoundJS.onLoadQueueComplete = doneLoading;

	SoundJS.addBatch([
		{name:"swooch", src:"assets/sounds/swooch" + filetype, instances:1}]);

	// attach mouse handlers directly to the source canvas
	// better than calling from canvas tag for cross browser
	canvas.onmousemove = mouseMove;
	canvas.onmousedown = mouseDown;
	canvas.onmouseup = mouseUp;
	
	// shape to draw vector data into:
	shape = new Shape();
	shape.x = 41;		//position in parent container
	graphics = shape.graphics;
	
	// middle spinner:
	innerContainer = new Container();
	innerContainer.addChild(shape);
	innerContainer.x = 303;		//position in parent container
	
	// outside spinner:
	outerContainer = new Container();
	outerContainer.addChild(innerContainer);
	
	//Arrows
	arrowImage = new Image();
	arrowImage.src = "assets/images/arrow.png";
	arrowImage.onload = arrowLoaded;

	// center it on the stage:
	outerContainer.x = canvas.width/2;
	outerContainer.y = canvas.height/2;
	stage.addChild(outerContainer);
	
	// start the tick and point it at the window so we can do some work before updating the stage:
	Ticker.setFPS(60);
	Ticker.addListener(window);
}
//done Loading sound
function doneLoading ()
{
	
}
function arrowLoaded () 
{
	arrowBitmap = 	new Bitmap(arrowImage);
	arrowHolder = [];

	for (var i = 0; i < MAX_ARROW; i++) 
	{
		arrowBitmap = 	new Bitmap(arrowImage);
		resetArrow (arrowBitmap);
		stage.addChild(arrowBitmap);
		arrowHolder.push(arrowBitmap);
	}
}
function resetArrow (arrow)
{
	arrow.x = Math.random()*980;
	arrow.y = Math.random()*500 + 460;
}

function tick() {
	for (var i = 0; i < MAX_ARROW; i++) 
	{
		var ar = arrowHolder[i]
		ar.y -= arrowSpeed;

		if(ar.hitTest(stage.mouseX, stage.mouseY))
			__logger("hit");

		if(ar.y <= -100 )
			resetArrow(ar);
	}

	graphics.clear();
	lineSize--;
	if(lineSize ==0)
		lineSize = 8;
	if(_mouseIsDown) {
		var color = Graphics.getHSL(
			Math.cos((count++)*0.01) * 180, 
			100, 
			50, 
			1.0);		
		
		// set up our drawing properties:
		graphics.setStrokeStyle(lineSize,"round").beginStroke(color);
		
		// start the line at the last position:
		graphics.moveTo(lastPt.x,lastPt.y);
		
		// calculate the new position in the shape's local coordinate space:
		lastPt = shape.globalToLocal(_mouseX,_mouseY);
		
		// draw the line, and close the path:
		graphics.lineTo(lastPt.x,lastPt.y);
	}
	
	// update the stage
	stage.update();
}

//start drawing
function mouseDown(e) {
	if(!e){ e = window.event; }
	_mouseIsDown = true;
	
	// set up the first point in the new draw, and choose a random color:
	lastPt = shape.globalToLocal(e.pageX-canvas.offsetLeft,e.pageY-canvas.offsetTop);
	
	// clear the cache, so the vector data is drawn each tick:
	shape.uncache();
}

//stop drawing
function mouseUp() {
	_mouseIsDown = false;
	graphics.clear();
	// cache the vector data to a saved canvas, so we don't have to render it each tick:	
	shape.cache(-800,-800,1600,1600);
}

//update mouse positions
function mouseMove(e) {
	if(!e){ e = window.event; }
	if(_mouseIsDown)
	{
		SoundJS.play("swooch");
	}
	_mouseX = e.pageX-canvas.offsetLeft;
	_mouseY = e.pageY-canvas.offsetTop;
}
function __logger (msg)
{
	if(!__debugMode || !console)
		return;
	console.log("Arrow Ninja trace : ", msg);
}

</script>
<style>
</style>
</head>
	
<body onload="init();">
	<div class="description">
		<h1>Arrow Ninja</h1>
		<p>By Khaled Garbaya</p>
    </div>
    <div class="canvasHolder">
		<canvas id="canvas" width="980" height="580"></canvas>
	</div>
</body>
</html>